<template>
  <div class="container">
    <!-- 轮播图 -->
    <div class="carousel">
      <el-carousel :interval="carouselInteval" height="250px">
        <el-carousel-item v-for="item in 4" :key="item">
          <img style="width: 100%;height: 100%;" src="http://image.tinx.top/background.jpg" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="header">
      <div class="title">
        <i class="square el-icon-tickets"></i>
        <span class="articleZh">文章</span> |
        <span class="articleEn">Articles</span>
        <span class="moreTip">
          <a href="#">
            查看更多
            <i class="el-icon-caret-right"></i>
          </a>
        </span>
      </div>
    </div>
    <div class="main" v-infinite-scroll="load()" infinite-scroll-disabled="disabled">
      <div v-for="item in articles" :key="item.id" class="articlePanel">
        <a href="#" @click.prevent="jumpToContent(item.id)">
          <el-row>
            <el-col :span="4">
              <img :src="item.img" />
            </el-col>
            <el-col :span="19">
              <h3>
                <a href="#" @click="jumpToContent(item.id)" v-text="item.title"></a>
              </h3>
              <p class="articleIntro" v-text="item.intro"></p>
              <p class="baseInfo">
                <i class="el-icon-time" v-text="item.baseInfo.publishTime"></i>
                <i class="el-icon-notebook-2" v-text="item.baseInfo.type"></i>
                <i class="el-icon-view" v-text="item.baseInfo.view"></i>
                <i class="el-icon-star-off" v-text="item.baseInfo.star"></i>
                <i class="el-icon-s-comment" v-text="item.baseInfo.comment"></i>
              </p>
            </el-col>
          </el-row>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'front',
  data() {
    return {
      carouselInteval: 4000,
      articles: [
        {
          id: 1,
          img: 'http://image.tinx.top/background.jpg',
          title: 'Java修炼手册',
          intro: '这可是一本超级好的入门书籍，可以阅读一下，你会受益匪浅的！',
          baseInfo: {
            publishTime: '2020-08-24',
            type: 'Java',
            view: 1,
            star: 2,
            comment: 3
          }
        },
        {
          id: 1,
          img: 'http://image.tinx.top/background.jpg',
          title: 'Java修炼手册',
          intro: '这可是一本超级好的入门书籍，可以阅读一下，你会受益匪浅的！',
          baseInfo: {
            publishTime: '2020-08-24',
            type: 'Java',
            view: 1,
            star: 2,
            comment: 3
          }
        },
        {
          id: 1,
          img: 'http://image.tinx.top/background.jpg',
          title: 'Java修炼手册',
          intro: '这可是一本超级好的入门书籍，可以阅读一下，你会受益匪浅的！',
          baseInfo: {
            publishTime: '2020-08-24',
            type: 'Java',
            view: 1,
            star: 2,
            comment: 3
          }
        },
        {
          id: 1,
          img: 'http://image.tinx.top/background.jpg',
          title: 'Java修炼手册',
          intro: '这可是一本超级好的入门书籍，可以阅读一下，你会受益匪浅的！',
          baseInfo: {
            publishTime: '2020-08-24',
            type: 'Java',
            view: 1,
            star: 2,
            comment: 3
          }
        },
      ]
    }
  },
  methods: {
    load (){},
    jumpToContent(id) {
      this.$router.push('/article');
    }
  },
}
</script>

<style lang="less" scoped>
.container {
  margin: 0 auto;
  padding: 5px;
  min-height: 100vh;
  .header {
    margin: 20px 0 10px 10px;
    padding-bottom: 10px;
    .title {
      border-bottom: 2px solid #c0c0c0;
      padding-bottom: 10px;
    }
    .square {
      height: 14px;
      width: 14px;
      background-color: #000;
    }
    .articleZh,
    .articleEn {
      font-size: 24px;
      color: #4f4f4f;
    }
    .moreTip {
      a {
        color: #409eff;
        font-size: 14px;
      }
    }
  }
  .main {
    height: 100%;
    overflow-y: auto;
    @keyframes articleAnimate {
      from {
        background: #ffffff;
      }
      to {
        background: skyblue;
      }
    }
    .articlePanel:hover {
      cursor: pointer;
      animation: articleAnimate 1s;
      // animation-direction: alternate;
      background-color: skyblue;
    }
    .articlePanel {
      border-bottom: 2px solid #c0c0c0;
      height: 120px;
      padding: 3px;
      position: relative;
      margin-bottom: 20px;
      img {
        height: 120px;
        width: 100%;
      }
      h3,
      .articleIntro,
      .baseInfo {
        margin: 2px 0 5px 5px;
      }
      .articleIntro {
        font-size: 15px;
      }
      .baseInfo {
        font-size: 13px;
        position: absolute;
        bottom: 0px;
        i {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
